<template>
  <div>
    <el-form inline class="query-form">
      <!-- 内容输入框 -->
      <el-form-item>
        <el-select v-model="queryParams.type" placeholder="请选择" size="small">
          <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <TimeRangeButtons defaultType="today" @change="handleTimeRange"></TimeRangeButtons>
      </el-form-item>

    </el-form>

    <!-- 查询结果区域 -->
    <div class="result-container">
      <!-- 第一行图表 -->
      <div class="chart-row">
        <!-- 图表1 -->
        <div class="chart-item" style="flex: 1;">
          <CallYoyQoqChart title="呼入量" :cdata="callInData" />
        </div>
        <!-- 图表2 -->
        <div class="chart-item" style="flex: 1;">
          <CallYoyQoqChart title="平均摘机用时" :cdata="avgHookOffTimeData" />
        </div>
        <!-- 图表3 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <CallYoyQoqChart title="摘机率" :cdata="hookOffRateData" />
          </dv-border-box-10>
        </div>
      </div>
      <!-- 第二行图表 -->
      <div class="chart-row">
        <!-- 图表4 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <CallYoyQoqChart title="呼救类型" :cdata="callTypeData" />
          </dv-border-box-10>
        </div>
      </div>
      <!-- 第三行图表 -->
      <div class="chart-row">
        <!-- 图表6 -->
        <div class="chart-item" style="flex: 2;">
          <dv-border-box-10>
            <CallYoyQoqChart title="未接听率" :cdata="missedCallRateData" />
          </dv-border-box-10>
        </div>
        <!-- 图表7 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <CallYoyQoqChart title="未接听数" :cdata="missedCallData" />
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeRangeButtons from "_c/TimeRangeButtons.vue";
import { getTimeRange } from '@/utils/dateUtil'
import CallYoyQoqChart from "@/views/stats/business/CallStats/chart/CallYoyQoqChart/index.vue";

export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        dispatcher: '',
        startTime: '',
        endTime: ''
      },
      typeOptions: [
        {
          value: '1',
          label: '电话呼入'
        },
        {
          value: '2',
          label: '手工制表'
        },
        {
          value: '3',
          label: '联动转单'
        }
      ],
      callInData: {
        categories: ['呼入量'],
        seriesData: [
          {
            name: '同期',
            data: [1136]
          },
          {
            name: '上期',
            data: [1316]
          },
          {
            name: '本期',
            data: [1334]
          }
        ]
      },
      avgHookOffTimeData: {
        categories: ['平均摘机用时'],
        seriesData: [
          {
            name: '同期',
            data: [1.14]
          },
          {
            name: '上期',
            data: [0.9]
          },
          {
            name: '本期',
            data: [0.93]
          }
        ]
      },
      hookOffRateData: {
        categories: ['3s摘机率', '5s摘机率', '10s摘机率'],
        seriesData: [
          {
            name: '同期',
            data: [99.54, 100, 100]
          },
          {
            name: '上期',
            data: [99.84, 100, 100]
          },
          {
            name: '本期',
            data: [99.84, 100, 100]
          }
        ]
      },
      callTypeData: {
        categories: ['骚扰', '预约', '误报', '普通急救', '工作电话', '关联电话（联动电话）', '催车', '咨询', '投诉电话'],
        seriesData: [
          {
            name: '同期',
            data: [1, 171, 7, 448, 0, 1, 19, 0, 0]
          },
          {
            name: '上期',
            data: [20, 6151, 162, 19476, 0, 94, 861, 71, 0]
          },
          {
            name: '本期',
            data: [20, 6151, 162, 19476, 0, 94, 861, 71, 0]
          }
        ]
      },
      missedCallRateData: {
        categories: ['3s', '5s', '10s'],
        seriesData: [
          {
            name: '同期',
            data: [4.11, 4.11, 4.11]
          },
          {
            name: '上期',
            data: [4.31, 4.31, 4.31]
          },
          {
            name: '本期',
            data: [4.31, 4.31, 4.31]
          }
        ]
      },
      missedCallData: {
        categories: ['3s', '5s', '10s'],
        seriesData: [
          {
            name: '同期',
            data: [28, 28, 28]
          },
          {
            name: '上期',
            data: [1214, 1214, 1214]
          },
          {
            name: '本期',
            data: [1214, 1214, 1214]
          }
        ]
      }
    }
  },
  components: {
    TimeRangeButtons,
    CallYoyQoqChart
  },
  methods: {
    // 处理时间范围选择
    handleTimeRange(type) {
      const [start, end] = getTimeRange(type)
      this.queryParams.startTime = start
      this.queryParams.endTime = end
      this.handleQuery();
    },

    // 处理查询
    handleQuery() {
      // 执行查询逻辑
      console.log('查询参数:', this.queryParams)
      // 这里可以添加实际的查询请求
    }
  },
  mounted() {
    // 默认选中今日
    this.handleTimeRange('today')
  }
}
</script>

<style lang="scss" scoped>

// 结果区域外层容器（控制图表和表格的垂直布局）
.result-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px; // 图表行与表格之间的间距
}

// 图表行布局
.chart-row {
  padding: 5px;
  display: flex;
  gap: 10px;
}

// 单个图表容器样式
.chart-item {
  padding: 5px;
  height: 270px;
}
</style>
